<template>
  <div class="app-multiple-file-upload">
    <van-row class="app-multiple-file-upload-label">
      <van-col span="8"  style="text-align: left;">
        <span class="stars" style="color: red;" v-if="!allowEmpty">*</span>
        {{labelText}}
      </van-col>
      <van-col span="16">
        <van-uploader
          :after-read="afterRead"
          multiple
          :accept="accept"
          @oversize="oversize"
          :max-size="maxSize"
        >
          <van-icon name="plus" />
        </van-uploader>
      </van-col>
    </van-row>
    <div class="app-multiple-list">
        <div class="app-multiple-list-item" v-for="item in fileList" :key="item.id">
            <van-cell :title="item.name"/>
            <span class="app-file-upload-tag-close" @click="deleteFile(item)"><van-icon name="cross" /></span>
        </div>
    </div>
  </div>
</template>



<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";
import { Environment } from "@/environments/environment";
import axios from "axios";
import { Toast } from "vant";

@Component({
  components: {}
})
export default class AppMultipleUploadFile extends Vue {
    /**
     * 标签文本值
     *
     * @type {string}
     * @memberof AppMultipleUploadFile
     */
    @Prop() public labelText!: string;

    /**
     * 是否必填
     *
     * @type {boolean}
     * @memberof AppMultipleUploadFile
     */
    @Prop() public allowEmpty!: boolean;

    /**
     * 是否禁用
     *
     * @type {boolean}
     * @memberof AppMultipleUploadFile
     */
    @Prop() public disabled?: boolean;

    /**
     * 传入值
     *
     * @type {any}
     * @memberof AppMultipleUploadFile
     */
    @Prop() public value?:any;

    /**
     * 监听value值变化
     *
     * @memberof AppUploadFile
     */
    @Watch('value', { immediate: true, deep: true })
    onValueChanged(val: any, oldVal: any) {
        if(val && JSON.parse(val).length >0){
            this.fileList = JSON.parse(val);
        }else{
            this.fileList = [];
        }
    }

    /**
     * 可接受的类型
     *
     * @type {any}
     * @memberof AppMultipleUploadFile
     **/
    public accept: any = "*";

    /**
     * 文件最大大小
     *
     * @type {any}
     * @memberof AppMultipleUploadFile
     **/
    public maxSize: number = 5*1024*1024;

    /**
    * 文件列表
    * 
    * @type {Array<any>}
    * @memberof AppUploadFile
    **/
    public fileList:Array<file> = [];

    /**
     * 文件过大限制
     *
     * @type {any}
     * @memberof AppMultipleUploadFile
     **/
    public oversize(file) {
        Toast("文件过大,上传失败");
    }

    /**
     *  已读后上传
     *
     *  @param {*} file
     *  @memberof AppMultipleUploadFile
     **/
    public afterRead(file: any) {
        if (file.length > 1) {
        file.forEach((item: any, index: any) => {
            let uploadImg = this.upLoaderFile(item.file);
        });
        } else {
        let uploadImg = this.upLoaderFile(file.file);
        }
    }

    /**
    *  删除文件
    * 
    *  @param {*} file
    *  @memberof AppMultipleUploadFile
    **/
    public deleteFile(file:any){
        let tempFileList:Array<any> =[];
        this.fileList.forEach((item:any) =>{
            if(!Object.is(item.id,file.id)){
                tempFileList.push(item);
            }
        })
        this.emitValue(tempFileList);
    }

    /**
    *  组件抛出值
    *  @param {*} val
    *  @memberof AppMultipleUploadFile
    **/
    public emitValue(val:any){
        this.$emit('valuechange',JSON.stringify(val));
    }

    /**
     * 上传文件
     *
     * @memberof AppMultipleUploadFile
     */
    public upLoaderFile(file: any) {
        let params = new FormData();
        params.append("file", file);
        let config = {
        headers: {
            "Content-Type": "multipart/form-data"
        }
        };
        axios
        .post(Environment.BaseUrl + Environment.UploadFile, params, config)
        .then(res => {
            if (res && res.data && res.status === 200) {
            this.fileList.push(res.data);
            this.emitValue(this.fileList);
            Toast("上传成功");
            } else {
            Toast("上传失败");
            }
        })
        .catch(err => {
            Toast("上传失败");
        });
    }
}
</script>
<style lang="less">
.app-multiple-file-upload {
  .app-multiple-file-upload-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
       .van-icon {
        position: relative;
        font: 14px/1 "vant-icon";
        font-size: inherit;
        font-size: 20px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        margin-top: 10px;
    }
  }
  .app-multiple-list-item{
      position: relative;
      .app-file-upload-tag-close{
        position: absolute;
        right: 1rem;
        top: 1rem;
      }
  }
}
</style>